<template>
  <van-pull-refresh v-model="isLoading" @refresh="Onrefresh" success-text="刷新成功">
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      offset="50"
      :immediate-check="false"
    >
      <!-- 这里我第一次写的时候 直接immediate-check=false  少了个冒号：
    加:是表达式   不加就是字符串 很明显:immediate-check=false是表达式
      或者我们可以前看面的属性finished，他也是加了：的-->
      <ArtItem :artcle="artcle" v-for="artcle in artcleList"
      :key="artcle.art_id"  @disLikeEV="disLikeFn" @reportEV='reportFN'
      @click.native="itemClickFn(artcle.art_id)"
      ></ArtItem>
    </van-list>
  </van-pull-refresh>

</template>

<script>
import ArtItem from '@/components/ArtItem'
import { getAllArticleListAPI, dislikeArticleAPI, reportArticleAPI } from '@/api'
import { Toast } from 'vant'
export default {
  data () {
    return {
      name: 123,
      isLoading: false, // 下拉刷新状态
      loading: false, // 底部加载状态
      finished: false, // 底部加载完成状态
      artcleList: [], // 文章列表
      timestamp: new Date().getTime() // 用于分页
    }
  },
  props: ['channelid'],
  name: 'artlist',
  components: {
    ArtItem
  },
  mounted () {
    this.getArticle()
  },
  methods: {
    // 获取文章列表
    async getArticle (channel_id = 0, timestamp) {
      try {
        // tab导航-激活频道ID (默认频道ID为0, 页面刚打开是推荐频道高亮-对应文章数据)
        const res = await getAllArticleListAPI({
          channel_id: this.channelid,
          timestamp: this.timestamp
        })
        // this.artcleList = res.data.data.results
        this.artcleList = [...this.artcleList, ...res.data.data.results]// 数据拼接
        this.timestamp = res.data.data.pre_timestamp
        this.loading = false
        if (res.data.data.pre_timestamp === null) {
        // 本次回来的数据是最后, 没有下一段数据了
          this.loading = true
          this.finished = true
          Toast('暂无更多数据')
        }
        this.isLoading = false
      } catch (error) {

      }
    },
    // 底部加载的事件方法
    onLoad () {
      this.getArticle()
    },
    // 下拉刷新
    Onrefresh () {
      // 目标: artcleList数组清空, 来一份新的数据
      this.artcleList = []
      this.getArticle()
    },
    // 自定义事件获取不感兴趣的文章id
    disLikeFn (target) {
      this.unlike(target)
    },
    // 自定义事件获取反馈的文章id和举报类型
    reportFN (target, type) {
      this.reportarticle(target, type)
    },
    // 文章 - 反馈 - 不感兴趣
    async unlike (target) {
      try {
        await dislikeArticleAPI({
          target
        })
        Toast.success('反馈成功')
      } catch (error) {
        Toast.fail('反馈失败')
      }
    },
    // 文章 - 反馈 - 反馈垃圾内容
    async reportarticle (target, type) {
      try {
        await reportArticleAPI({ target, type })
        Toast.success('举报成功')
      } catch (error) {
        Toast.fail('举报失败')
      }
    },
    // 获取文章详情
    itemClickFn (art_id) {
      this.$router.push({
        path: '/detail',
        query: {
          art_id: art_id
        }
      })
    }
  }
}
</script>

<style>
</style>
